import React, { useEffect, useRef, useState } from 'react';
import {
  get_getemployee_content_list,
  get_svg_captcha,
} from '../utils/api.tsx';
import { adduserlist, addpermission } from '../store/model/login.tsx';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import './login.scss';
import { Input, message } from 'antd';
import Button from '@material-ui/core/Button';
import Tell_yzm from '../Compon/Tell_yzm.tsx';
export default function Login() {
  const navgiate = useNavigate();
  const usedispatch = useDispatch();

  const get_getemployee_content_list_data = async () => {
    const data = await get_getemployee_content_list({ phone, password });
    localStorage.setItem('userlist', JSON.stringify(data.data.userlist));
    localStorage.setItem('permission', JSON.stringify(data.data.permission));
    // usedispatch(adduserlist(JSON.parse(localStorage.getItem('userlist'))));
    usedispatch(addpermission(JSON.parse(localStorage.getItem('permission'))));
    navgiate('/home/index_home');
  };

  const [captcha, setcaptcha] = useState<any>(null);
  const get_svg_captcha_data = async () => {
    const data = await get_svg_captcha();
    // console.log(data.data.data);
    setcaptcha(data.data.data);
  };

  useEffect(() => {
    // get_getemployee_content_list_data();
    get_svg_captcha_data();
  }, []);
  const [phone, settell] = useState<number>();
  const [password, setpassword] = useState<string>('');
  const [yzmcode, setyzmcode] = useState<string>('');
  const getyzmcode = (code) => {
    setyzmcode(code);
    console.log(yzmcode);
  };

  return (
    <div className="login_home">
      <div className="login_container">
        <div className="container">
          <h2>登录</h2>
          <h2>登录</h2>
        </div>

        <h4 style={{ marginTop: '0.5rem' }}>欢迎回来!</h4>

        <div className="login_input">
          <div>
            <Input
              placeholder="手机号码"
              size="large"
              value={phone}
              onChange={(event) => {
                settell(Number(event.target.value));
              }}
            />
          </div>
          <div>
            <Input
              placeholder="密码"
              size="large"
              value={password}
              onChange={(e) => {
                setpassword(e.target.value);
              }}
            />
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <Input
              placeholder="图片验证码"
              size="large"
              style={{ width: '70%' }}
            />

            <div
              onClick={() => {
                get_svg_captcha_data();
              }}
              dangerouslySetInnerHTML={{
                __html: captcha,
              }}
            />
          </div>
          <div>
            <Tell_yzm name="验证码" tell={phone} getyzmcode={getyzmcode} />
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <div>人脸识别</div>
            <div
              onClick={() => {
                navgiate('/register');
              }}
            >
              忘记密码
            </div>
          </div>
        </div>
        <div>
          <Button
            style={{ fontSize: '0.2rem', width: '100%' }}
            variant="contained"
            color="primary"
            size="small"
            onClick={() => {
              if (!phone || !password) {
                message.error('请输入完整信息');
                return;
              } else {
                get_getemployee_content_list_data();
              }
            }}
            onKeyDown={(e) => {
              if (e.key === 'Enter') {
                if (!phone || !password) {
                  message.error('请输入完整信息');
                  return;
                } else {
                  get_getemployee_content_list_data();
                }
              }
            }}
          >
            <span className="text">登录</span>
            <span className="shimmer"></span>
          </Button>
        </div>
      </div>
    </div>
  );
}
